<template>
	<view class="face-entry">
		<view class="box"
			:style="{ backgroundImage: `url(${assetsPath}a06acbc423ebebdb06a51fe3e797b5922e5cddb6.png)` }">
			<u-button text="立即录入" color="#fff" shape="circle" @click="faceEntry"></u-button>
		</view>

		<view class="flex-align" style="margin-top: 70rpx;">
			<view style="font-size: 36rpx;">拍摄须知</view>
			<view style="margin-left: 20rpx; color: #666; font-size: 28rpx;">请确保是本人操作</view>
		</view>
		<view style="padding: 0 30rpx; margin-top: 25rpx;">
			<u-image :src="assetsPath + 'c49c54d3f026c219219ab526396d93b3252a3e23.png'" width="100%" height="180rpx"></u-image>
		</view>
		
		<u-toast ref="uToast"></u-toast>
		
		<u-popup :show="show" mode="center">
			<view class="entry-result pr" :style="{ backgroundImage: `url(${assetsPath}${entrySuccess ? 'c37633a62df931754d75b305636087a78a9de60f' : '84654f4aee01bce92c9efd1eab54b863d1b33d77'}.png)` }">
				<view class="face pa" :style="{ borderColor: entrySuccess ? '#15BC5F' : '#EE233B' }">
					
				</view>
				<view class="close pa" @click="show = false"></view>
				<view class="text pa flex-center" @click="show = false">
					{{ entrySuccess ? '我知道了' : '重新录入' }}
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			assetsPath: this.$https.assetsPath,
			show: false,
			entrySuccess: false
		}
	},
	methods: {
		faceEntry() {
			// 先判断使用设备是否支持人脸识别
			uni.checkIsSupportFacialRecognition({
				success: res => {
					uni.startFacialRecognitionVerify({
						name: '', // 身份证名称
						idCardNumber: '', // 身份证号码
						checkAliveType: 2, // 1:读数字（默认值）；2:屏幕闪烁
						success: resFacial => {
							this.entrySuccess = true;
							this.show = true;
							
							if (resFacial.errCode == 0) {
								// 人脸识别成功之后调用个人信息保存接口
								console.log(resFacial);
							} else {
								this.$refs.uToast.show({
									message: resFacial.errMsg
								});
							}
						},
						fail: err => {
							this.entrySuccess = false;
							this.show = true;
							
							if (err.errCode == 90100) {
								this.$refs.uToast.show({
									message: '用户已取消！'
								});
							} else {
								this.$refs.uToast.show({
									message: '人脸识别失败！'
								});
							}
						}
					})
				},
				fail: res => {
					this.entrySuccess = false;
					this.show = true;
					
					this.$refs.uToast.show({
						message: '该设备不支持人脸识别功能！'
					});
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.face-entry {
	padding: 100rpx 30rpx calc(30rpx + env(safe-area-inset-bottom));
	color: #333;

	.box {
		background-position: left top;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 743rpx;
		overflow: hidden;

		/deep/.u-button {
			box-shadow: 0px 9px 27px 2px rgba(0, 0, 0, 0.2);
			width: 248rpx;
			height: 74rpx;
			color: #2F75FA !important;
			margin: 586rpx auto 0;
		}
	}
	
	/deep/.u-popup__content {
		background-color: transparent;
	}
	
	.entry-result {
		width: 516rpx;
		height: 645rpx;
		background-position: left top;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		
		.close {
			width: 30rpx;
			height: 30rpx;
			top: 20rpx;
			right: 24rpx;
		}
		
		.text {
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			height: 110rpx;
			width: 100%;
		}
		
		.face {
			border-radius: 50%;
			background-color: #fff;
			border: 5rpx solid;
			width: 304rpx;
			height: 304rpx;
			left: 50%;
			top: 201rpx;
			transform: translateX(-50%);
		}
	}
}
</style>
